<template>
  <div class="question-detail-container animate__animated animate__fadeIn">
    <!-- 问题标题 -->
    <div class="question-header animate__animated animate__fadeInDown">
      <h1 class="question-title">{{ question.title }}</h1>
    </div>

    <!-- 问题内容 -->
    <div class="question-content-wrapper animate__animated animate__fadeIn">
      <div class="question-content" v-html="showFullContent ? question.content : truncatedContent"></div>
      <button v-if="question.content && question.content.length > 300" @click="toggleContent" class="expand-btn">
        <span>{{ showFullContent ? '收起' : '展开全文' }}</span>
        <t-icon :name="showFullContent ? 'chevron-up' : 'chevron-down'" />
      </button>
    </div>

    <!-- 作者信息 -->
    <div class="author-info animate__animated animate__fadeIn">
      <div class="author-basic">
        <el-popover
          placement="right"
          trigger="hover"
          width="300"
        >
          <template #reference>
            <div class="author-avatar" @click="router.push(`/home/userCenter/${author.id}`)">
              <img :src="author.profilePicture || defaultAvatar" alt="avatar">
            </div>
          </template>
          <div class="author-card">
            <div class="author-card-header">
              <img :src="author.profilePicture || defaultAvatar" alt="avatar">
              <h3>{{ author.username }}</h3>
            </div>
            <div class="author-card-info">
              <p>{{ author.description || '这个人很懒，什么都没留下' }}</p>
            </div>
            <div class="author-card-stats">
              <div class="stat-item">
                <span class="stat-label">提问</span>
                <span class="stat-value">{{ author.questionCount }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">获赞</span>
                <span class="stat-value">{{ author.likeCount }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">粉丝</span>
                <span class="stat-value">{{ author.followerCount }}</span>
              </div>
            </div>
          </div>
        </el-popover>
        <div class="author-details">
          <span 
            class="author-name username-hover" 
            @click="router.push(`/home/userCenter/${author.id}`)"
          >{{ author.username }}</span>
          <p class="author-description">{{ author.description || '这个人很懒，什么都没留下' }}</p>
        </div>
      </div>
      <el-button 
        v-if="author.id && profile.id && author.id !== profile.id" 
        class="follow-btn" 
        :type="isFollowed ? 'info' : 'primary'" 
        size="small" 
        round 
        :class="{ active: isFollowed }" 
        @click="handleFollow"
      >
        <t-icon :name="isFollowed ? 'check' : 'user-add'" class="follow-icon" />
        {{ isFollowed ? '已关注' : '关注' }}
      </el-button>
    </div>

    <!-- 问题元信息 -->
    <div class="question-meta animate__animated animate__fadeInUp">
      <div class="meta-item">
        <t-icon name="time" />
        <span>{{ formatDate(question.createdAt) }}</span>
      </div>
      <div class="meta-item">
        <t-icon name="check-circle" />
        <span>{{ question.status }}</span>
      </div>
    </div>

    <!-- 互动区域 -->
    <div class="interaction-area">
      <!-- 点赞收藏 -->
      <div class="action-buttons animate__animated animate__fadeInUp">
        <button class="action-btn comment-count-btn" @click="showCommentsDialog = true">
          <t-icon name="chat" />
          <span>评论 {{ question.commentCount || 0 }}</span>
        </button>
        <button class="action-btn like-btn" :class="{ active: isLiked }" @click="handleLike">
          <t-icon :name="isLiked ? 'thumb-up-2' : 'thumb-up'" :class="{ active: isLiked }" v-if="!isLiking" /> 
          <t-icon name="loading" spin v-if="isLiking" /> 
          <span>{{ question.likeCount || 0 }}</span>
        </button>
        <el-popover
          placement="top"
          :width="300"
          trigger="click"
          v-model:visible="showFolders"
          popper-class="favorite-popover"
        >
          <template #reference>
            <button class="action-btn favorite-btn" :class="{ active: isFavorited }">
              <t-icon :name="isFavorited ? 'star' : 'star'" :class="{ active: isFavorited }" />
              <span>{{ question.favoriteCount || 0 }}</span>
            </button>
          </template>
          <div class="folder-list">
            <h4 class="folder-title">选择收藏夹</h4>
            <ul>
              <li v-for="folder in favoriteFolders" :key="folder.id" class="folder-item">
                <div class="folder-info">
                  <t-icon name="folder" class="folder-icon" />
                  <span>{{ folder.folderName }} ({{ folder.contentCount }})</span>
                </div>
                <el-button 
                  size="small"
                  :type="folder.isFavorited ? 'warning' : 'default'"
                  class="folder-btn"
                  @click="handleFavorite(folder.id)"
                >
                  <span v-if="!isFavoriteFoldersLoading">{{ folder.isFavorited ? '取消收藏' : '收藏' }}</span>
                  <t-icon name="loading" v-else spin />
                </el-button>
              </li>
            </ul>
          </div>
        </el-popover>
        <button class="action-btn share-btn" @click="shareQuestion">
          <t-icon name="share" />
          <span>分享</span>
        </button>
        <button class="action-btn answer-btn" @click="showAnswerDialog = true">
          <t-icon name="edit" />
          <span>写回答</span>
        </button>
      </div>
    </div>

    <!-- 路由视图 - 回答列表将在这里显示 -->
    <router-view></router-view>

    <!-- 悬浮按钮 -->
    <div class="float-buttons">
      <button class="float-btn comment-btn" @click="showCommentsDialog = true" title="查看评论">
        <t-icon name="chat" />
      </button>
      <button class="float-btn answer-float-btn" @click="showAnswerDialog = true" title="写回答">
        <t-icon name="edit" />
      </button>
      <button class="float-btn" @click="scrollToTop" title="回到顶部">
        <t-icon name="chevron-up" />
      </button>
    </div>

    <!-- 评论弹窗 -->
    <el-dialog
      v-model="showCommentsDialog"
      title="评论"
      width="70%"
      class="comments-dialog"
    >
      <!-- 评论区 -->
      <div class="comments-section">
        <div class="comments-header">
          <h3 class="comments-title"><t-icon name="chat" /> 评论 ({{ question.commentCount || 0 }})</h3>
        </div>
        
        <!-- 编辑器区域 -->
        <div class="editor-container">
          <div class="editor-wrapper">
            <Toolbar
              style="border-bottom: 1px solid #dcdfe6"
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 200px; overflow-y: hidden;"
              v-model="newComment"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="handleCreated"
            />
          </div>
          <button class="submit-comment" @click="submitComment">
            <t-icon name="send" /> 发表评论
          </button>
        </div>

        <div id="comments-container">
          <div v-if="comments.length > 0" class="comments-list">
            <div v-for="comment in comments" :key="comment.id" class="comment-item">
              <div class="user-info">
                <el-popover
                  placement="right"
                  trigger="hover"
                  width="300"
                  :disabled="!comment.user"
                >
                  <template #reference>
                    <img :src="comment.user?.profilePicture || defaultAvatar" alt="avatar" class="comment-avatar" @click="router.push(`/home/userCenter/${comment.user.id}`)">
                  </template>
                  <div class="author-card">
                    <div class="author-card-header">
                      <img :src="comment.user?.profilePicture || defaultAvatar" alt="avatar">
                      <h3>{{ comment.user?.username }}</h3>
                    </div>
                    <div class="author-card-info">
                      <p>{{ comment.user?.description || '这个人很懒，什么都没留下' }}</p>
                    </div>
                    <div class="author-card-stats">
                      <div class="stat-item">
                        <span class="stat-label">提问</span>
                        <span class="stat-value">{{ comment.user?.questionCount || 0 }}</span>
                      </div>
                      <div class="stat-item">
                        <span class="stat-label">获赞</span>
                        <span class="stat-value">{{ comment.user?.likeCount || 0 }}</span>
                      </div>
                      <div class="stat-item">
                        <span class="stat-label">粉丝</span>
                        <span class="stat-value">{{ comment.user?.followerCount || 0 }}</span>
                      </div>
                    </div>
                  </div>
                </el-popover>
                <div class="comment-user-details">
                  <div 
                    class="user-name username-hover" 
                    @click="router.push(`/home/userCenter/${comment.user.id}`)"
                  >
                    {{ comment.user?.username }}
                  </div>
                  <div class="time">{{ formatDate(comment.createdAt) }}</div>
                </div>
              </div>
              <div class="comment-content" v-html="comment.content"></div>
              <div class="comment-footer">
                <div class="comment-actions">
                  <button class="action-button" :disabled="comment.isLiking" @click="handleCommentLike(comment)">
                    <t-icon 
                      :name="comment.isLiked ? 'thumb-up-2' : 'thumb-up'" 
                      :class="{ active: comment.isLiked }" 
                      v-if="!comment.isLiking"
                    />
                    <t-icon name="loading" spin v-if="comment.isLiking" /> 
                    <span>{{ comment.likeCount || 0 }}</span>
                  </button>
                  <button class="action-button reply-btn" @click="replyToComment(comment)">
                    <t-icon name="reply" />
                    <span>回复</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="no-comments">
            <t-icon name="chat" class="no-comments-icon" />
            <p>暂无评论，快来发表第一条评论吧！</p>
          </div>
          <div v-if="hasMore" class="load-more">
            <button class="load-more-btn" @click="loadMoreComments">
              加载更多评论
              <t-icon name="chevron-down" />
            </button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 写回答弹窗 -->
    <el-dialog
      v-model="showAnswerDialog"
      title="写回答"
      width="70%"      class="answer-dialog"
    >
      <div class="answer-editor-container">
        <div class="editor-wrapper">
          <Toolbar
            style="border-bottom: 1px solid #dcdfe6"
            :editor="answerEditorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 300px; overflow-y: hidden;"
            v-model="newAnswer"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleAnswerEditorCreated"
          />
        </div>
        <button class="submit-answer" @click="submitAnswer">
          <t-icon name="send" /> 提交回答
        </button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, shallowRef } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getQuestionById } from '@/api/questionApi';
import { findUserById, createUserLike, deleteUserLike, isLiked as checkIsLiked, 
         createUserFavorite, deleteUserFavorite, isFavorite as checkIsFavorite,
         followUser, unfollowUser, isFollowing as checkIsFollowing,
         getAllFavoriteFolders, isFolderFavorite } from '@/api/userApi';
import { uploadComment, getCommentsByParentIdDESC } from '@/api/commentApi';
import { uploadAnswer } from '@/api/answerApi';
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/stores/userStore';
import { storeToRefs } from 'pinia';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import '@wangeditor/editor/dist/css/style.css';
import { uploadImage } from '@/api/uploadApi';
import 'animate.css';
import defaultAvatarImg from '@/imgs/avatar.png';

const router = useRouter();
const route = useRoute();
const editorRef = shallowRef();
const answerEditorRef = shallowRef();
const userStore = useUserStore();
const { profile } = storeToRefs(userStore);

const questionId = ref(route.params.id);
const question = ref({});
const author = ref({});
const isLiked = ref(false);
const isFavorited = ref(false);
const isFollowed = ref(false);
const showFolders = ref(false);
const favoriteFolders = ref([]);
const showComments = ref(true);
const comments = ref([]);
const newComment = ref('');
const currentPage = ref(1);
const pageSize = ref(5);
const hasMore = ref(false);
const isFavoriteFoldersLoading = ref(false);
const showFullContent = ref(false);
const truncatedContent = ref('');
const isLiking = ref(false);
const showCommentsDialog = ref(false);
const showContentDialog = ref(false);
const showAnswerDialog = ref(false);
const newAnswer = ref('');

const defaultAvatar = defaultAvatarImg;

const toolbarConfig = {
  toolbarKeys: [
    'bold', 'italic', 'underline', 'through',
    'color', 'bgColor', 'fontSize', 'fontFamily',
    'bulletedList', 'numberedList', 'justifyLeft',
    'justifyCenter', 'justifyRight', 'emotion',
    'uploadImage', 'undo', 'redo'
  ]
};

const editorConfig = {
  placeholder: '写下你的评论...',
  MENU_CONF: {
    uploadImage: {
      customUpload: async (file, insertFn) => {
        const formData = new FormData();
        formData.append('file', file);
        try {
          const response = await uploadImage(formData);
          insertFn(response.data.url);
          ElMessage.success('图片上传成功');
        } catch (error) {
          ElMessage.error('图片上传失败');
        }
      }
    }
  }
};

const mode = 'default';

const handleCreated = (editor) => {
  editorRef.value = editor;
};

const handleAnswerEditorCreated = (editor) => {
  answerEditorRef.value = editor;
};

const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  const now = new Date();
  const diff = now - date;
  
  if (diff < 60 * 1000) return `${Math.floor(diff / 1000)}秒前`;
  if (diff < 60 * 60 * 1000) return `${Math.floor(diff / (60 * 1000))}分钟前`;
  if (diff < 24 * 60 * 60 * 1000) return `${Math.floor(diff / (60 * 60 * 1000))}小时前`;
  if (date.getFullYear() === now.getFullYear()) return `${date.getMonth() + 1}月${date.getDate()}日`;
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
};

const toggleContent = () => {
  showFullContent.value = !showFullContent.value;
  if (!showFullContent.value) {
    truncatedContent.value = question.value.content.slice(0, 300) + '...';
  }
};

const loadComments = async (reset = false) => {
  try {
    if (reset) {
      currentPage.value = 1;
      comments.value = [];
    }
    const response = await getCommentsByParentIdDESC(question.value.id, currentPage.value, pageSize.value);
    const { data, total } = response;
    
    const commentsWithUserInfo = await Promise.all(
      data.map(async (comment) => {
        const userResponse = await findUserById(comment.userId);
        const isLiked = await checkIsLiked(profile.value.id, comment.id, 'comment');
        return {
          ...comment,
          user: userResponse.data,
          isLiked: isLiked.data,
          isLiking: false
        };
      })
    );
    
    comments.value = reset ? commentsWithUserInfo : [...comments.value, ...commentsWithUserInfo];
    hasMore.value = comments.value.length < total;
  } catch (error) {
    console.error('加载评论失败:', error);
    ElMessage.error('加载评论失败');
  }
};

const loadMoreComments = async () => {
  currentPage.value++;
  await loadComments();
};

const submitComment = async () => {
  if (!profile.value?.id) {
    ElMessage.warning('请先登录');
    return;
  }
  if (!newComment.value.trim()) {
    ElMessage.warning('评论内容不能为空');
    return;
  }
  
  try {
    const response = await uploadComment({
      content: newComment.value,
      userId: profile.value.id,
      parentId: question.value.id,
      contentType: 'question',
      repliedUsername: author.value.username
    });
    newComment.value = '';
    question.value.commentCount++;
    await loadComments(true);
    ElMessage.success('评论发表成功');
  } catch (error) {
    console.error('提交评论失败:', error);
    ElMessage.error('评论发表失败');
  }
};

const submitAnswer = async () => {
  if (!profile.value?.id) {
    ElMessage.warning('请先登录');
    return;
  }
  if (!newAnswer.value.trim()) {
    ElMessage.warning('回答内容不能为空');
    return;
  }
  
  try {
    const response = await uploadAnswer(
      newAnswer.value,
      profile.value.id,
      question.value.id
    );
    newAnswer.value = '';
    showAnswerDialog.value = false;
    ElMessage.success('回答发表成功');
    // 刷新回答列表
    router.go(0);
  } catch (error) {
    console.error('提交回答失败:', error);
    ElMessage.error('回答发表失败');
  }
};

const handleLike = async () => {
  if (isLiking.value) return;
  isLiking.value = true;
  
  try {
    if (isLiked.value) {
      await deleteUserLike({ userId: profile.value.id, contentId: question.value.id, contentType: 'question' });
      question.value.likeCount--;
      isLiked.value = false;
      ElMessage.info('取消点赞');
    } else {
      await createUserLike({ userId: profile.value.id, targetUserId: question.value.userId, contentId: question.value.id, contentType: 'question' });
      question.value.likeCount++;
      isLiked.value = true;
      ElMessage.success('点赞成功');
    }
  } catch (error) {
    ElMessage.error('操作失败');
  } finally {
    isLiking.value = false;
  }
};

const handleFavorite = async (folderId) => {
  isFavoriteFoldersLoading.value = true;
  try {
    const folder = favoriteFolders.value.find(f => f.id === folderId);
    if (folder.isFavorited) {
      await deleteUserFavorite({ userId: profile.value.id, contentId: question.value.id, contentType: 'question', folderId });
      question.value.favoriteCount--;
      folder.isFavorited = false;
      folder.contentCount--;
      ElMessage.info('取消收藏');
    } else {
      await createUserFavorite({ userId: profile.value.id, contentId: question.value.id, contentType: 'question', folderId });
      question.value.favoriteCount++;
      folder.isFavorited = true;
      folder.contentCount++;
      ElMessage.success('收藏成功');
    }
    isFavorited.value = favoriteFolders.value.some(f => f.isFavorited);
  } catch (error) {
    ElMessage.error('操作失败');
  } finally {
    isFavoriteFoldersLoading.value = false;
  }
};

const handleFollow = async () => {
  if (!profile.value?.id) {
    ElMessage.warning('请先登录');
    return;
  }
  if (author.value.id === profile.value.id) {
    ElMessage.warning('不能关注自己');
    return;
  }
  
  try {
    if (isFollowed.value) {
      await unfollowUser({ followerId: profile.value.id, followingId: author.value.id });
      author.value.followerCount--;
      isFollowed.value = false;
      ElMessage.info('取消关注');
    } else {
      await followUser({ followerId: profile.value.id, followingId: author.value.id });
      author.value.followerCount++;
      isFollowed.value = true;
      ElMessage.success('关注成功');
    }
  } catch (error) {
    ElMessage.error('操作失败');
  }
};

const handleCommentLike = async (comment) => {
  if (comment.isLiking) return;
  comment.isLiking = true;
  
  try {
    if (comment.isLiked) {
      await deleteUserLike({ userId: profile.value.id, contentId: comment.id, contentType: 'comment' });
      comment.likeCount--;
      comment.isLiked = false;
      ElMessage.info('取消点赞');
    } else {
      await createUserLike({ userId: profile.value.id, targetUserId: comment.userId, contentId: comment.id, contentType: 'comment' });
      comment.likeCount++;
      comment.isLiked = true;
      ElMessage.success('点赞成功');
    }
  } catch (error) {
    ElMessage.error('操作失败');
  } finally {
    comment.isLiking = false;
  }
};

const replyToComment = (comment) => {
  // In editor add @username
  if (editorRef.value) {
    editorRef.value.insertText(`@${comment.user.username} `);
    // Ensure comment dialog is open
    showCommentsDialog.value = true;
  }
};

const shareQuestion = () => {
  // Copy current page link to clipboard
  const url = window.location.href;
  navigator.clipboard.writeText(url).then(() => {
    ElMessage.success('链接已复制，快去分享吧！');
  }).catch(() => {
    ElMessage.error('复制链接失败');
  });
};

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

onMounted(async () => {
  try {
    const response = await getQuestionById(questionId.value);
    question.value = response.data;
    
    const userResponse = await findUserById(question.value.userId);
    author.value = userResponse.data;
    
    if (profile.value.id) {
      const [likeResponse, favoriteResponse, followResponse, foldersResponse] = await Promise.all([
        checkIsLiked(profile.value.id, question.value.id),
        checkIsFavorite(profile.value.id, question.value.id),
        checkIsFollowing(profile.value.id, author.value.id),
        getAllFavoriteFolders(profile.value.id)
      ]);
      
      isLiked.value = likeResponse.data;
      isFavorited.value = favoriteResponse.data;
      isFollowed.value = followResponse.data;
      
      const folders = foldersResponse.data;
      const folderFavoriteChecks = await Promise.all(
        folders.map(folder => isFolderFavorite(profile.value.id, question.value.id, folder.id))
      );
      
      favoriteFolders.value = folders.map((folder, index) => ({
        ...folder,
        isFavorited: folderFavoriteChecks[index].data
      }));
    }
    
    if (question.value.content && question.value.content.length > 300) {
      truncatedContent.value = question.value.content.slice(0, 300) + '...';
    } else {
      truncatedContent.value = question.value.content;
      showFullContent.value = true;
    }
    
    await loadComments();
  } catch (error) {
    console.error('加载问题失败:', error);
    ElMessage.error('加载问题失败');
  }
});
</script>
<style scoped>
/* 定义样式变量 */
:root {
  --primary-gradient: linear-gradient(135deg, #409eff, #67c23a);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  --primary-color: #409eff;
  --success-color: #67c23a;
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --border-color: #ebeef5;
  --bg-hover: #f5f7fa;
}

.question-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  background-color: #ffffff;
  min-height: 100vh;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.question-header {
  margin-bottom: 30px;
  text-align: center;
  padding-bottom: 20px;
  position: relative;
}

.question-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--primary-gradient);
  border-radius: 3px;
}

.question-title {
  font-size: 2rem;
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  background: linear-gradient(120deg, #303133, #606266);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.question-content-wrapper {
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 12px;
  background-color: #f9f9f9;
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.question-content-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.question-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-primary);
  padding: 15px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 15px auto 0;
  padding: 8px 16px;
  background: linear-gradient(135deg, #f5f7fa, #ecf5ff);
  color: var(--primary-color);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-weight: 500;
}

.expand-btn:hover {
  background: linear-gradient(135deg, #ecf5ff, #d9ecff);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
}

.expand-btn:active {
  transform: scale(0.98);
}

.author-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff, #f9f9f9);
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-left: 4px solid var(--primary-color);
}

.author-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.author-basic {
  display: flex;
  align-items: center;
  gap: 15px;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  border: 2px solid #fff;
}

.author-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  border-color: var(--primary-color);
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s;
  max-width: 100%;
  height: auto;
}

.author-avatar:hover img {
  filter: brightness(1.05);
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.3s, transform 0.2s;
  position: relative;
}

.author-name:hover {
  color: var(--primary-color);
  transform: translateX(3px);
}

.author-name::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

.author-name:hover::after {
  width: 100%;
}

.author-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 5px;
  font-style: italic;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.author-details:hover .author-description {
  opacity: 1;
}

.follow-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
  border-radius: 20px;
  padding: 8px 16px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.follow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.follow-btn:active {
  transform: scale(0.98);
}

.follow-btn.active {
  background-color: #f0f2f5;
  color: var(--text-regular);
}

.follow-icon {
  font-size: 14px;
  transition: transform 0.3s;
}

.follow-btn:hover .follow-icon {
  transform: scale(1.2);
}

.folder-list {
  padding: 10px 0;
}

.folder-title {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  font-weight: 600;
  text-align: center;
}

.folder-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c0c4cc #f4f4f5;
  border-radius: 8px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.03);
}

.folder-list ul::-webkit-scrollbar {
  width: 6px;
}

.folder-list ul::-webkit-scrollbar-thumb {
  background-color: #c0c4cc;
  border-radius: 3px;
}

.folder-list ul::-webkit-scrollbar-track {
  background-color: #f4f4f5;
}

.folder-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid var(--border-color);
  transition: all 0.3s;
  border-radius: 6px;
}

.folder-item:last-child {
  border-bottom: none;
}

.folder-item:hover {
  background-color: var(--bg-hover);
  transform: translateX(5px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.folder-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.folder-icon {
  color: var(--primary-color);
  transition: transform 0.3s;
}

.folder-item:hover .folder-icon {
  transform: scale(1.2);
}

.folder-btn {
  transition: all 0.3s;
  border-radius: 15px;
}

.folder-btn:hover {
  transform: scale(1.05);
}

.folder-btn:active {
  transform: scale(0.98);
}

.share-btn {
  color: var(--text-secondary);
  transition: all 0.3s;
  border-radius: 20px;
}

.share-btn:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background-color: #ecf5ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
}

.share-btn:active {
  transform: scale(0.98);
}

.load-more {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 10px;
}

.load-more-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  color: var(--text-regular);
  background: linear-gradient(145deg, #f5f7fa, #ecf5ff);
  border: 1px solid #dcdfe6;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
}

.load-more-btn:hover {
  color: var(--primary-color);
  border-color: #c6e2ff;
  background: linear-gradient(145deg, #ecf5ff, #d9ecff);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
}

.load-more-btn:active {
  transform: scale(0.98);
}

.username-hover {
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  display: inline-block;
}

.username-hover:hover {
  color: var(--primary-color);
  transform: translateX(3px);
}

.username-hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

.username-hover:hover::after {
  width: 100%;
}

.author-card {
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: linear-gradient(145deg, #ffffff, #f9f9f9);
  border-top: 3px solid var(--primary-color);
}

.author-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.author-card-header img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  height: auto;
}

.author-card-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1.1rem;
}

.author-card-info {
  margin-bottom: 15px;
  color: var(--text-regular);
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 0 5px;
}

.author-card-stats {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--border-color);
  padding-top: 15px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s;
}

.stat-item:hover {
  transform: translateY(-3px);
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.stat-value {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1.1rem;
}

/* 深度选择器修改 Element-UI 样式 */
:deep(.el-popover__arrow) {
  border-top-color: var(--primary-color); /* 与主题色一致 */
}

:deep(.el-dialog__header) {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  border-radius: 12px 12px 0 0;
}

:deep(.el-button:disabled) {
  color: #c0c4cc !important;
  background-color: #f5f7fa !important;
  cursor: not-allowed;
}

/* 编辑器组件样式 */
.editor-wrapper {
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  overflow: hidden;
}

:deep(.w-e-editor [data-placeholder]) {
  color: var(--text-secondary) !important;
}

/* 悬浮按钮样式 */
.float-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.float-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.float-btn:hover {
  background: var(--primary-color);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.2);
}

.float-btn:active {
  transform: scale(0.95);
}

.answer-float-btn {
  background: var(--success-color); /* 绿色主题按钮 */
  color: #fff;
}

/* 交互状态优化 */
.action-btn:active {
  transform: scale(0.98);
}

.like-btn.isLiking {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 评论区样式 */
.comments-section {
  margin-top: 30px;
  padding: 20px;
  border-radius: 12px;
  background-color: #f9f9f9;
  box-shadow: var(--card-shadow);
}

.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.comments-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-item {
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.comment-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.comment-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-user-info {
  display: flex;
  flex-direction: column;
}

.comment-username {
  font-weight: 600;
  color: var(--text-primary);
}

.time {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.comment-content {
  margin-bottom: 15px;
  line-height: 1.6;
  color: var(--text-regular);
  padding: 0 5px;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-actions {
  display: flex;
  gap: 15px;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s;
  padding: 5px 10px;
  border-radius: 15px;
}

.action-button:hover {
  color: var(--primary-color);
  background-color: #ecf5ff;
}

.action-button .active {
  color: var(--primary-color);
}

.reply-btn:hover {
  color: var(--success-color);
  background-color: #f0f9eb;
}

.no-comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: var(--text-secondary);
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.no-comments-icon {
  font-size: 3rem;
  margin-bottom: 15px;
  opacity: 0.6;
}

/* 回答编辑器样式 */
.answer-editor-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.submit-answer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--success-color);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
  align-self: flex-end;
  box-shadow: 0 2px 6px rgba(103, 194, 58, 0.2);
}

.submit-answer:hover {
  background: #85ce61;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}

.submit-answer:active {
  transform: scale(0.98);
}

.answer-dialog {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.answer-dialog .el-dialog__body) {
  padding: 20px;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .question-detail-container {
    padding: 20px;
  }

  .question-title {
    font-size: 1.5rem;
  }

  .author-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .float-buttons {
    right: 10px;
    bottom: 10px;
  }
  
  .question-content {
    font-size: 1rem;
  }
  
  .author-card-stats {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* 评论头像响应式 */
.comment-avatar img {
  max-width: 100%;
  height: auto;
}
</style>
